<template>
  <div class="index">
    <PublicComp/>
    <div class="el-container is-vertical">
      <div class="el-container">
        <el-aside style="background-color: #333333; width: auto;">

          <el-menu router :default-active="activePath" class="el-menu-vertical-demo"
                   :unique-opened="true" background-color="#333" text-color="#fff" active-text-color="#2db7a0"
                   :collapse="isCollapse" style="width: auto; border: 0">
            <div
              style="height: 56px; background-color: #333333; color:#fff; line-height: 56px; margin-left: 20px">
              <img height="24px" src="../../static/img/logo.svg" style="vertical-align:middle;" width="24px">
              <span slot="title" :style="{marginRight: '20px', display: isCollapse ? 'none' : 'inline'}">知识管理平台</span>
            </div>
            <div v-for="(item,index) in menuList">
              <!-- 一级菜单直接跳转 -->
              <el-menu-item v-if="!item.children || item.children.length === 0" :index="item.url" :key="'item' + index">
                <img v-if="UTIL.isNotEmpty(item.icon)" :src="item.icon" height="20px" style="vertical-align:middle;"
                     width="20px">
                <div v-else style="width: auto; height: 20px; display: inline-block; "/>
                <span slot="title" :style="{display: isCollapse ? 'none' : 'inline'}">{{ item.name }}</span>
              </el-menu-item>
              <!-- 一级菜单包含子菜单 -->
              <el-submenu v-else :index="'item' + index" :key="'item' + index">
                <template slot="title">
                  <img v-if="UTIL.isNotEmpty(item.icon)" :src="item.icon" height="20px" style="vertical-align:middle;"
                       width="20px">
                  <div v-else style="width: auto; height: 20px; display: inline-block; "/>
                  <span slot="title"
                        :style="{ marginRight: '60px',display: isCollapse ? 'none' : 'inline'}">{{ item.name }}</span>
                </template>
                <!-- 遍历二级菜单 -->
                <div v-for="(subItem,subIndex) in item.children" :key="'subItem' + subIndex">
                  <!-- 二级菜单直接跳转 -->
                  <el-menu-item v-if="!subItem.children || subItem.children.length === 0" :index="subItem.url"
                                @click="saveState(subItem.url)">
                    <span style="padding-left: 10px; ">{{ subItem.name }}</span>
                  </el-menu-item>
                  <!-- 二级菜单包含子菜单 -->
                  <el-submenu v-else :index="'subItem' + subIndex" :key="'subItem' + subIndex">
                    <template slot="title">
                      <img v-if="UTIL.isNotEmpty(subItem.icon)" :src="subItem.icon" height="20px"
                           style="vertical-align:middle;"
                           width="20px">
                      <div v-else style="width: auto; height: 20px; display: inline-block; "/>
                      <span>{{ subItem.name }}</span>
                    </template>
                    <!-- 遍历三级菜单-->
                    <el-menu-item v-for="(grandChildItem,grandChildIndex) in subItem.children"
                                  :key="'grandChildItem' + grandChildIndex" :index="grandChildItem.url"
                                  @click="saveState(grandChildItem.url)">
                      <span style="padding-left: 10px; " v-html="grandChildItem.name"/>
                    </el-menu-item>
                  </el-submenu>
                </div>
              </el-submenu>
            </div>
          </el-menu>
        </el-aside>

        <div class="el-container is-vertical" style="background-color: #F1F2F4;">
          <el-header style="background-color: #FFFFFF; height: 50px;padding-left: 0px">
            <div
              style="line-height: 50px; width: 100%; height: 50px; padding-left: 20px; font-size: 14px; vertical-align: middle; font-weight: bold;">

              <div style="display: inline-block" v-on:click="cli()">
                <i :class="iconType" style=" font-size: 20px;font-weight:normal "></i>
              </div>
              <span style="display: inline-block">
                <img src="../../static/img/workstation.svg" width="16px" height="16px">
                &nbsp;<span slot="title">工作台</span>
              </span>
              <div style="float: right; padding-right: 20px; font-size: 12px;width: 110px;display: inline-block">
                <el-popover ref="popover4" placement="bottom" popper-class="my-popover" trigger="click">
                  <el-button icon="el-icon-switch-button" size="mini" type="text" v-on:click="loginOut()">退出登录
                  </el-button>
                </el-popover>
                <span v-popover:popover4 class="cursor">
                <span style="padding-right: 10px;" v-html="user.userName"></span>
                <img src="../../static/img/user.svg" style="width: 30px; height: 30px; vertical-align: middle;">
              </span>
              </div>
            </div>

          </el-header>
          <div class="el-main"
               style="background-color: #FFFFFF; margin: 5px 5px 0 5px; padding: 0px; overflow: hidden;">
            <div :key="routerKey">
              <keep-alive :include="whiteList">
                <router-view style="margin: 5px; "/>
              </keep-alive>
            </div>
            <!--        <App :key="routerKey" style="margin: 5px; "/>-->
          </div>
          <el-footer
            style="background-color: #F1F2F4; line-height: 30px; text-align: center; height: 30px; color: #666666; font-size: 12px;">
            地址：北京市朝阳区潘家园南里19号人卫大厦 © {{ currentYear }} 北京人卫智数科技有限公司
            <a style="text-decoration: none; color: #666666;" href="http://beian.miit.gov.cn" target="_blank">京ICP备19054460号-1</a>
            <img src="../../static/img/record_icon.png" width="20px" height="20px" style="vertical-align:middle;">
            <a style="text-decoration: none; color: #666666;"
               href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502039674" target="_blank">京公网安备
              11010502039674号</a>
          </el-footer>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import App from '../App'
import PublicComp from "./PublicComp";
import ExerciseIndex from "./exerciseBook/ExerciseIndex";

export default {
  name: "Index",
  components: {
    PublicComp,
    App,
  },
  data() {
    let activePath = this.$route.path
    if (!activePath || activePath === "/index") {
      activePath = "/SchemeWork"
    }
    this.$store.commit('setActivePath', activePath)
    return {
      iconType: 'el-icon-s-fold',
      isCollapse: false,
      routerKey: false,
      currentYear: new Date().getFullYear(),
      whiteList: [
        'ExerciseIndex',
        'KnowledgeEdit',
        'Manage',
        'KnowledgeLibManage',
        'ReleaseAndSyncTab',
        'MyEdit',
        'MyAudit',
        'FlowChartManage',
        'AllTaskList',
        'SelfTaskList',
        'TaskEditManage',
        'JournalDetail',
        'JournalLib',
        'TempKnowledge',
        'BookLib',
        'UserTable',
        'BookLib',
        'BookTermDetail',
        'Term',
        'StandardTerm',
        'BookPush',
        'TempKnowledgeTable',
        'TempAndReleaseTable',
        'ReleasedFlowChart',
        'KnowledgeEdit',
        'MaterialTable',
        'AllAuditTask',
        'bookAdd',
        'resourceUpload',
        'generateQrcode',
        'bookList',
        'AllTaskEditTable',
        'Detail',
        'ShowKnowledgeTable'
      ],
      showButton: true
    }
  },
  computed: {
    ...mapState(['user', 'activePath', 'menuList'])
  },
  methods: {
    loginOut() {

      this.$confirm('您确认退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get('/pmph/action/pmph/logout')
          .then(() => {
            this.axios.get('/pmph/action/pmph/logout')
          })
      })
    },
    saveState(activePath) {
      this.$store.commit('setRouteParam', {})
      this.routeChange(activePath)
      this.routerKey = !this.routerKey
    },
    cli() {
      if (this.isCollapse) {
        this.iconType = "el-icon-s-fold";
        this.isCollapse = false
      } else {
        this.iconType = "el-icon-s-unfold"
        this.isCollapse = true
      }
    },
    routeChange(url) {
      let menuItem = UTIL.findTreeNode(this.menuList, item => item.url === url)
      if (menuItem) {
        this.$store.commit('setActivePath', url)
        this.$store.commit('setActiveId', menuItem.id)
      }
    }
  },
  watch: {
    $route(to) {
      this.routeChange(to.path)
    }
  },
  created() {
    // 初始化部分store;
    this.$store.dispatch('setKnowledgeLibList')
    this.$store.dispatch('setRuleList')
    this.$store.dispatch('setUser')
    this.$store.dispatch('setUserList')
    this.$store.dispatch('setPlatformList')
    this.$store.dispatch('setMenuList').then(
      () => this.routeChange(this.activePath)
    )
    this.$store.dispatch('setTagTree')
    if (this.activePath !== this.$route.path) {
      this.$router.push(this.activePath)
    }
  }
}
</script>

<style>
.index {
  height: calc(100vh);
}

html, body, #app, .el-container {
  /*统一设置高度为100%*/
  height: 100%;
}

.el-icon-logo:before {
  content: url("../../static/img/logo.svg");
}

.el-submenu .el-menu-item:hover {
  color: #2db7a0 !important;
}

.el-menu-item:focus {
  color: #2db7a0 !important;
}

.el-submenu__title:hover {
  background-color: #2db7a0 !important;
}

.el-menu-item:hover {
  background-color: #333333 !important;
  color: #2db7a0;
}

.el-aside::-webkit-scrollbar {
  display: none;
}

.cursor {
  cursor: pointer;
}

.el-popover.my-popover {
  min-width: 70px;
  height: 25px;
}
</style>
